<template>
    <div class="home">
        <!-- 顶部区域 -->
        <div class="header">
            <div class="item">
                总销售额
                <div class="num">700,000</div>
                <div class="bottom">总销售额：3，222</div>
            </div>
            <div class="item">
                访问量
                <div class="num">832,444</div>
                <div class="bottom">今日访问额：3，222</div>
            </div>
            <div class="item">
                销售额
                <div class="num">132,444</div>
                <div class="bottom">今日销售额：3，222</div>
            </div>
            <div class="item">
                支付量
                <div class="num">2,444</div>
                <div class="bottom">今日支付量：3，222</div>
            </div>
        </div>

        <!-- 访问数据统计 -->
        <div class="content">
            <div class="time-info" id="box13">
                <div class="title">月销售额
                    <div id="charts" style="width: 100%;height: 404px;"></div>
                </div>

                <!-- <div class="title">
                    月销售额                  
                    <div id="charts" style="width: 100%;height: 300px;"></div>
                </div> -->
                <!-- <div class="title" id="charts" style="width: 100%;height: 420px;"> 月销售额 </div> -->
            </div>
            <div class="area" id="box1">
                <div class="title">产品销售比例

                    <div id="pie" style="width: 100%;height: 404px;"></div>
                </div>
               


            </div>
        </div>
        <!-- 最新内容 -->
        <div class="home-footer">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>今日订单</span>

                </div>
                <div class="text item">
                    <el-row>
                        <el-col :span="8">
                            <div>今日订单数</div>
                            <div>111</div>
                        </el-col>
                        <el-col :span="8">
                            <div>汇总确认订单</div>
                            <div>222</div>
                        </el-col>
                        <el-col :span="8">
                            <div>今日金额</div>
                            <div>333</div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>本月订单</span>
                </div>
                <div class="text item">
                    <el-row>
                        <el-col :span="8">
                            <div>本月订单数</div>
                            <div>111</div>
                        </el-col>
                        <el-col :span="8">
                            <div>汇总确认订单</div>
                            <div>222</div>
                        </el-col>
                        <el-col :span="8">
                            <div>本月金额</div>
                            <div>333</div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>快捷入口</span>
                </div>
                <div class="text item">
                    <el-button type="primary">产品管理</el-button>
                    <el-button>消息管理</el-button>
                    <el-button>内容管理</el-button>
                </div>
            </el-card>
        </div>



    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {

        }
    },
    created() {


    },
    methods: {
        //绘制折线柱状
        loadEcharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('charts'));
            // 绘制图表
            myChart.setOption({
                // title: {
                //     text: 'ECharts 入门示例'
                // },
                tooltip: {
                    //提示框
                    trigger: 'axis',

                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                    axisLine: {
                        //坐标轴轴线相关设置
                        lineStyle: {
                            color: 'skyblue'
                        }
                    },
                    axisTick: {
                        //坐标轴刻度相关设置
                        alignWithLabel: true

                    }
                },
                yAxis: {
                    axisLine: {
                        //坐标轴轴线相关设置
                        lineStyle: {
                            color: 'skyblue'
                        }
                    },
                },
                series: [
                    {
                        name: '销量',
                        type: 'line',// bar 柱状图  line 折线图 pie 饼图 map 地图
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            });
            // 自适应div
            myChart.setOption(Option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });

        },
        loadEcharts2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('charts'));
            // 绘制图表
            myChart.setOption({
                // title: {
                //     text: 'ECharts 入门示例'
                // },
                tooltip: {
                    //提示框
                    trigger: 'axis',

                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                    axisLine: {
                        //坐标轴轴线相关设置
                        lineStyle: {
                            color: 'black'
                        }
                    },
                    axisTick: {
                        //坐标轴刻度相关设置
                        alignWithLabel: true

                    }
                },
                yAxis: {
                    axisLine: {
                        //坐标轴轴线相关设置
                        lineStyle: {
                            color: 'black'
                        }
                    },
                },
                series: [
                    {
                        name: '销售额',
                        type: 'line',// bar 柱状图  line 折线图 pie 饼图 map 地图
                        data: [54, 60, 46, 30, 70, 30],
                        smooth: true,//是否平滑曲线
                    },
                    {
                        name: '销售量',
                        type: 'bar',// bar 柱状图  line 折线图 pie 饼图 map 地图
                        data: [23, 20, 36, 20, 40, 20],

                    },


                ]
            });
            //自适应div
            myChart.setOption(Option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });

        },
        //绘制饼图
        pie() {
            var myChart = echarts.init(document.getElementById('pie'));

            var option;

            option = {
                
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    //系列
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '产品销售',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            //值和名字
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

        }
    },
    mounted() {
        this.loadEcharts2();
        this.pie();
    },
    //过滤器
    filters: {
        //对value过滤
        // num(value) {
        //   if(!value){
        //     return value.toLocat();
        //   }
        // }
    }
}
</script>



<style lang='less' scoped>
// .home {
//     // margin: 10px;
// }

.header {
    display: flex;
    padding-right: 30px;

    .item {
        flex: 1;
        height: 100px;
        padding: 10px;
        background: #FFF;
        border-radius: 10px;
        margin-left: 20px;
        font-weight: bold;
        color: #FFF;
        position: relative;
        box-shadow: 10px 10px 10px #d6cbcb;

        .num {
            font-size: 22px;
            margin: 10px;
            color: #FFF;
        }

        .bottom {
            position: absolute;
            border-top: 1px solid rgb(246, 245, 245);
            padding: 10px 20px;
            bottom: 0;
            right: 0;
            left: 0;
            color: #FFF;
            font-weight: normal;
        }
    }

    .item:nth-child(1) {
        background-image: linear-gradient(#df887d, #88554d);
    }

    .item:nth-child(2) {
        background-image: linear-gradient(#4f9ec2, #0a2e70);
    }

    .item:nth-child(3) {
        background-image: linear-gradient(#d254e2, #5c1379);
    }

    .item:nth-child(4) {
        background-image: linear-gradient(#36b852, #3acaab);
    }
}

//图标
.content {
    margin: 20px;
    display: flex;
    height: 420px;

    .time-info {
        flex: 2;
        background-color: #FFF;
        margin-right: 20px;
        margin-top: -10px;
        padding: 10px;
    }

    .area {
        flex: 1;
        background: #FFF;
       
        box-shadow: 3px 10px 15px #d6cbcb;
    }

    .title {
        box-shadow: 3px 10px 15px #d6cbcb;
        text-align: center;
        font-size: large;
        
    }


}

//内容
.home-footer {
    display: flex;
    padding-left: 20px;
    margin-bottom: 20px;

    .box-card {
        flex: 1;
        margin-right: 30px;
        box-shadow: 3px 10px 15px #d6cbcb;

        span {
            font-weight: 600;
        }
    }
}

// .text {
//     font-size: 14px;
// }

// .item {
//     margin-bottom: 18px;
// }

// .clearfix:before,
// .clearfix:after {
//     display: table;
//     content: "";
// }

// .clearfix:after {
//     clear: both
// }

// .box-card {
//     width: 300px;

// }
</style>